import { Link, Outlet, history, useLocation } from 'umi';
import styles from './index.less';
import React, { useEffect, useRef, useState } from 'react';
import { Button, Space, Tag, TabBar, Tabs } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

export default function Layout() {
  const location = useLocation();
  console.log(location);

  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <AppOutline />,
      // badge: Badge.dot,
    },
    {
      key: '/statistics',
      title: '统计',
      icon: <UserOutline />,
    },
  ]
  const onChange = (key: string) => {
    history.push(`${key}`);
  }
  return (
    <div className={styles.app}>
      {/* <div className={styles.top}>
          配合路由使用
        </div> */}
      <div className={styles.body}>
        <Outlet />
      </div>
      <div className={styles.bottom}>
        <TabBar activeKey={location.pathname} onChange={onChange}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
}
